<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }

        .red {
            background-color: red;
            float: left;
        }

        .green {
            background-color: green;
            width: 200px;
            height: 200px;
            float: left;
        }

        .pink {
            background-color: pink;
            float: left;
        }

        .yellow {
            background-color: yellow;
            float: left;
        }

        .blue {
            background-color: blue;
            float: left;
        }
        .black{
            background-color: #000;
            float: left;
        }
        .container{
            width: 1200px;
            /* height: 600px; */
            margin: 0 auto;
            outline: 2px solid red;
        }
        .in-block{
            display: inline-block;
            /* 解决inline-block布局导致的基线对齐 
            */
            /* vertical-align三个可以选，top,middle,bottom */
            vertical-align: top;
        }
        .b2{
            font-size: 40px;
            height: 200px;
        }
        span{
            background-color: rgb(223, 107, 107);
            width: 100px;
            height: 100px;
            display: inline-block;
            float: left;
        }
        .c1{
            /* width: 1200px; */
            /* height: 150px; */
            margin: 0 auto;
            outline: 2px solid red;
        }
        .f1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: rgb(69, 119, 107);
            float: left;
        }
        body{
            height: 2500px;
        }
        .abc{
            background-color: rgb(123, 141, 223);
            clear: both;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box red">red</div>
        <div class="box green"></div>
        <div class="box abc">abc</div>
        <div class="box pink"></div>
        <div class="box yellow"></div>
        <div class="box blue"></div>
        <div class="box black"></div>
    </div>
    <!-- 浮动的边界 
    1.浮动元素不能超过不浮动元素的下边界
    2.浮动的元素不能重叠
    3.行内元素，行内块元素浮动之后会变成块级元素
    4.如果一个容器没有设置高度，里面的全部元素都浮动，则该容器的高度会塌陷为0；
    -->
    <!-- 解决浮动塌陷
         .clearfix::after{
            content: '';
            display: block;
            clear: both;
         }
    -->
    <div class="container">
        <span >span1</span>
        <span >span2</span>
    </div>
    <div class="container">
        <div class="box in-block">1</div>
        <div class="box in-block b2">2</div>
        <div class="box in-block"></div>
        <div class="box in-block"></div>
    </div>
    <hr>
    <div class="c1">
        <!-- c1高度没设置高度 -->
        <div class="f1"></div>
        <div class="f1"></div>
        <div class="f1"></div>
    </div>
</body>

</html>